<template>
  <div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
      <!-- 搜索工作栏 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
        <el-form-item label="物料名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入物料名称" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="物料代码" prop="modeCode">
          <el-input v-model="queryParams.modeCode" placeholder="请输入物料代码" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column type="index" label="序号" align="center" width="50"/>
        <el-table-column label="物料代码" align="center" prop="modeCode" />
        <el-table-column label="客户零件号" align="center" prop="partNumber" />
        <el-table-column label="零件简号" align="center" prop="partNumberShort" />
        <el-table-column label="在库数量" align="center" prop="count" />
        <el-table-column label="待出库数量" align="center" prop="notShipCount" />
        <el-table-column label="质检异常\返厂数量" align="center" prop="defectCount" />
        <el-table-column label="出库数量" align="center" class-name="small-padding fixed-width">
          <template v-slot="scope">
            <el-input :disabled="scope.row.shipFlg" v-model.number="scope.row.shipCount" class="shipCount"
                      oninput="value=value.replace(/[^0-9]/g,'')"/>
            <el-button v-if="!scope.row.shipFlg" type="text" icon="el-icon-plus" size="mini" @click="addInputRow(scope.row)">添加</el-button>
            <el-button v-if="scope.row.shipFlg" type="text" style="color: #F56C6C;" icon="el-icon-refresh-left" size="mini" @click="reduceInputRow(scope.row)">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitShipOrderForm" :disabled="formLoading">创建出库单</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getWarehouseSimpleList} from "@/api/hs/warehouse";
import {getMaterialModePage} from "@/api/hs/material";
import {createManualShipOrder} from "@/api/hs/shiporder";
import {getCustomerSimpleList} from "@/api/hs/customer";

export default {
  name: "ShipOrderTripartiteForm",
  components: {},
  data() {
    return {
      loading: false,
      formLoading: false,
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 物料代码列表
      list: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        materialModel: undefined,
        materialName: undefined
      },
      warehouseList: [],
      customerList: [],
      formData: {
        toCustomerCode: undefined,
        shipOrderDetailList: []
      },
    };
  },
  methods: {
    /** 打开弹窗 */
    async open() {
      this.dialogVisible = true;
      this.title = "新增三方出库单";
      await this.getList();
    },
    /** 查询列表 */
    async getList() {
      try {
        this.loading = true;
        const res = await getMaterialModePage(this.queryParams);
        this.list = res.data.list.map(item => ({
          ...item,
          shipFlg: false, // 默认不显示撤销按钮
          shipCount: 0    // 确保有默认值
        }));
        this.total = res.data.total;
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 添加到出库单 */
    addInputRow(row) {
      if (row.count - row.notShipCount - row.defectCount < row.shipCount) {
        this.$modal.msgError("出库数量不能大于在库数量 - 待出库数量 - 质检异常数量");
        return;
      }
      row.shipFlg = true;
    },
    /** 从出库单中撤销 */
    reduceInputRow(row) {
      row.shipFlg = false;
      row.shipCount = 0;
    },
    /** 创建出库单 */
    submitShipOrderForm() {
      this.formLoading = true;
      try {
        const shipOrderDetailList = this.list.filter(item => item.shipFlg).map(item => ({
          materialModeCode: item.modeCode,
          shipCount: item.shipCount
        }));
        let shipOrderData = {
          shipOrderDetailList: shipOrderDetailList
        };
        createManualShipOrder(shipOrderData).then(res => {
          if (res.code === 0) {
            this.$modal.msgSuccess("创建成功");
            this.dialogVisible = false;
            this.$emit('success');
          }
        });
      } finally {
        this.formLoading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
:deep(.shipCount) {
  width: 60px;
  margin-right: 10px;
  text-align: center;
  padding: 0;
  input {
    padding: 0 5px;
    text-align: center;
  }
}
</style>
